<template>
    <div>
        <header-ele>登录</header-ele>
       <section class="page">
    <div class="login-page">
        <!-- 登录框 -->
        <div class="login-wrap">
            <div class="login-text">
                <input @focus="focusText"  v-model="username" type="text" class="login-username" placeholder="用户名/邮箱/已验证手机" />
                <i class="iconfont icon-close" data-close="username" v-show="username" @click="clearText"></i>
            </div>
            <div class="login-text">
                <input @focus="focusText"  ref="passwordText" v-model="password" type="password" class="login-password" placeholder="请输入密码" />
                <div>
                    <i class="iconfont icon-close" data-close="password" v-show="password" @click="clearText"></i>
                    <i class="iconfont icon-eye1 eye" @click="changeType" v-if="!passwordType"></i>
                    <i class="iconfont icon-eye eye" @click="changeType" v-else></i>
                    <router-link tag="span" to="./forget-password">忘记密码</router-link>
                </div>
            </div>
        </div>
        <!-- 错误提示 -->
        <div class="login-error">{{errMsg}}</div>
        <button class="login-button" :class="{'active' : username.trim()&&password.trim()}" @click="login">登 录</button>
        <!-- 快捷导航 -->
        <div class="quick-nav">
            <router-link tag="span" class="register-button" to="./register">快速注册</router-link>
        </div>
        <!-- 其他登录方式 -->
        <div class="other-login">
            <div class="other-head">
                <i></i>
                <span>其它登录方式</span>
                <i></i>
            </div>
            <div class="other-con">
                <div class="login-icon" @click="QQlogin">
                    <i class="iconfont icon-tubiao215"></i>
                    <span>QQ</span>
                </div>
                <div class="login-icon">
                    <i class="iconfont icon-weixin1"></i>
                    <span>微信</span>
                </div>
            </div>
            <p>登录即代表您已同意<a>知心购隐私政策</a></p>
        </div>
    </div>
</section>

    </div>
</template>
<script>
import headerEle from '../components/header.vue';
export default {
    data() {
        return {
        username: '',
        password: '',
        errMsg: '',
        passwordType: 0
        }
    },
    created(){
        this.$store.commit('changeFooterShow',false)
    },
    components:{
        headerEle
    },
    watch:{
        username(){},
            // console.log(newval);
            // console.log(oldval);
            // return this.username ? true : false
     
        password(){},
    },
    methods:{
        focusText(e) {
        let $className = e.currentTarget
        // console.log($className);
        $className === 'login-username' ? this.usernameClose = false : this.passwordClose = false
    },
    clearText(e) {
        let $close = e.currentTarget.getAttribute('data-close')
        this[$close] = ''
    },
    changeType() {
        let $type = this.$refs.passwordText.getAttribute('type'),
            value = ''
        $type === 'password' ? value = 'text' : value = 'password'
        this.$refs.passwordText.setAttribute('type', value)
        this.passwordType = !this.passwordType
    },
    login(){
        if(this.username&&this.password){
            {
            this.$axios({
                url:'user/login',
                method:'post',
                headers:{'content-Type': 'application/x-www-form-urlencoded'},
                data:`username=${this.username}&password=${this.password}`
            }).then((res)=>{
                console.log(res);
                if(res.data.status == -1){
                    alert(res.data.msg)
                }else{
                    this.$store.commit('setToken',res.data.data.token)
                    this.$router.push('/mime')
                }
                
            })
        }
        }else {
            alert('用户名或密码不能为空')
        }
      
    },
    QQlogin(){
        window.qc.Login.showPopup({
            appId:"101850878",
            redirectURI:"http://localhost:8080/proxy"
        })

    }
},

}
</script>

<style lang="scss" scoped>
@import '../common/style/mixin.scss';
.page {
    padding: 0 50px;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    .login-page {
        margin-top: 60px;

        .login-wrap {
            width: 100%;

            .login-text {
                @include fj;
                width: 100%;
                height: 60px;
                line-height: 60px;
                margin-top: 100px;
                border-bottom: 1px solid #dcdcdc;

                .iconfont {
                    font-size: 26px;
                    color: #CCCCCC;

                    &.eye {
                        padding: 0 30px;
                        font-size: 40px;
                        border-right: 1px solid #dcdcdc;
                    }
                }

                input {
                    width: 100%;
                    height: 100%;
                    margin-right: 20px;
                    line-height: 60px;
                    color: #222;
                    font-size: 32px;

                    &.login-password {
                        width: 50%;
                    }
                }

                span {
                    padding-left: 20px;
                    font-size: 30px;
                }

                div {
                    display: flex;
                }
            }
        }

        .login-error {
            width: 100%;
            height: 40px;
            line-height: 40px;
            padding: 30px 0;
            color: $red;
            font-size: 26px;
        }

        .login-button {
            width: 100%;
            height: 100px;
            text-align: center;
            line-height: 100px;
            color: #fff;
            font-size: 32px;
            background: rgba(246, 53, 21, .5);
            @include borderRadius(60px);

            &.active {
                background: rgb(246, 53, 21)
            }
        }

        .quick-nav {
            padding: 40px 0;
            width: 100%;
            text-align: right;

            .register-button {
                color: #999;
                font-size: 28px;
            }
        }

        .other-login {
            width: 100%;
            margin-top: 100px;

            .other-head {
                @include fj;

                i {
                    flex: 1;
                    height: 1px;
                    margin-top: 18px;
                    background: #dcdcdc;
                }

                span {
                    flex: 1;
                    text-align: center;
                    font-size: 28px;
                    color: #dcdcdc;
                }
            }

            .other-con {
                display: flex;
                width: 320px;
                padding: 40px 0;
                margin: 0 auto;

                .login-icon {
                    display: flex;
                    flex-direction: column;
                    width: 96px;
                    margin: 0 30px;
                    text-align: center;

                    .iconfont {
                        width: 100%;
                        height: 96px;
                        line-height: 96px;
                        font-size: 60px;
                        color: #15B8F5;
                        background: #E7F7FE;
                        @include borderRadius(50%);

                        &.icon-weixin1 {
                            font-size: 50px;
                            color: #09BB07;
                            background: #E6F8E6;
                        }
                    }

                    span {
                        padding-top: 20px;
                        color: #999;
                    }
                }
            }

            p {
                margin-top: 20px;
                width: 100%;
                text-align: center;
                color: #999;

                a {
                    color: #409eff;
                }
            }
        }
    }
}
</style>